<template>
  <div class="stu_form">
    <div>
      <el-input v-model="addemail"> </el-input>
      <el-input v-model="adduserName"></el-input>
      <el-input v-model="addphone"></el-input>
      <el-button type="primary" @click="addStudent">添加</el-button>
    </div>
    <div>
      <el-input v-model="seaEmail"></el-input>
      <el-input v-model="seaUsername"> </el-input>
      <el-input v-model="seaPhone"></el-input>
      <el-button type="success" @click="toSearch">查询</el-button>
    </div>
  </div>
</template>
<script>
import { _addStudent } from '../../api/student'
export default {
  data () {
    return {
      addemail: '',
      adduserName: '',
      addphone: '',
      seaEmail: '',
      seaPhone: '',
      seaUsername: ''
    }
  },
  methods: {
    toSearch () {
      //搜索
      // 当前表单组件的查询数据 传递给 父组件 接口需要的数据
      this.$parent.userName = this.seaUsername
      this.$parent.phone = this.seaPhone
      this.$parent.email = this.seaEmail
      this.$parent.getStudent()
      this.seaUsername = ''
      this.seaPhone = ''
      this.seaEmail = ''
    },
    async addStudent () {
      // 接口
      // 1 什么时候调用这个接口
      // 2 要发送那些数据给后台  如何获取到这些要发送数据
      // 3 回来的数据如何处理
      // 调用添加学员接口
      var res = await _addStudent({
        addemail: this.addemail,
        adduserName: this.adduserName,
        addphone: this.addphone
      })
      console.log(res)
      if (res.success) {
        this.$message.success('添加学员成功')
      }
      // 清空输入框
      this.addemail = ''
      this.adduserName = ''
      this.addphone = ''
    }
  }
}
</script>
<style lang="less" scoped>
.stu_form {
  width: 80%;
  height: 200px;
  margin: 20px auto;
  > div {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .el-input {
      width: 350px;
    }
  }
}
</style>
